<template>
  <div class="qq-login-container">
    <h2>QQ扫码登录</h2>
    <div class="qr-code-area">
      <img v-if="qrCode" :src="qrCode" alt="QQ二维码" class="qr-image">
      <div v-else class="loading">正在生成二维码...</div>
    </div>
    <div v-if="loginStatus" class="status-message" :class="statusClass">
      {{ loginStatus }}
    </div>
    <div v-if="userInfo" class="user-info">
      <h3>登录成功！</h3>
      <div class="user-details">
        <img :src="userInfo.avatar" alt="头像" class="user-avatar">
        <div class="user-text">
          <p><strong>用户名：</strong>{{ userInfo.nickname }}</p>
          <p><strong>OpenID：</strong>{{ userInfo.openid }}</p>
        </div>
      </div>
      <button @click="goToMainPage" class="main-btn">开始实名认证</button>
    </div>
    <button @click="refreshQRCode" class="refresh-btn">刷新二维码</button>
    <!-- 只在这里加按钮，点击才登录 -->
    <button @click="autoLogin" class="login-btn">模拟QQ登录</button>
  </div>
  <el-dialog
    v-model="qqDialogVisible"
    title="QQ扫码登录"
    width="360px"
    :close-on-click-modal="false"
    @close="onQQDialogClose"
  >
    <div class="qq-login-dialog-content">
      <div class="qq-login-title">QQ扫码登录</div>
      <div class="qq-login-qrcode">
        <img :src="qqQRCode" alt="QQ扫码二维码" />
      </div>
      <el-alert
        class="qq-login-tip"
        title="请使用QQ扫码登录，扫码后点击下方按钮完成登录"
        type="success"
        show-icon
        :closable="false"
      />
      <div class="qq-login-btns">
        <el-button size="small" @click="refreshQQQRCode">刷新二维码</el-button>
        <el-button size="small" type="primary" @click="simulateQQLogin">模拟QQ登录</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const qrCode = ref('');
const loginStatus = ref('');
const userInfo = ref(null);
const statusClass = ref('');
const qqDialogVisible = ref(false);
const qqQRCode = ref('');

onMounted(() => {
  generateQRCode();
});

const generateQRCode = async () => {
  try {
    loginStatus.value = '正在生成二维码...';
    statusClass.value = 'info';
    const res = await fetch('http://127.0.0.1:8000/user/qq-login/');
    const data = await res.json();
    qrCode.value = data.qr_code;
    loginStatus.value = '请使用QQ扫码登录，扫码后点击下方按钮完成登录';
    statusClass.value = 'success';
  } catch (error) {
    console.error('获取二维码失败:', error);
    loginStatus.value = '获取二维码失败，请重试';
    statusClass.value = 'error';
  }
};

const autoLogin = async () => {
  // 直接模拟登录成功
  const mockUserInfo = {
    nickname: '测试用户',
    openid: 'mock_openid_123456',
    avatar: 'https://q1.qlogo.cn/g?b=qq&nk=123456&s=100'
  };
  localStorage.setItem('qq_token', 'mock_token');
  localStorage.setItem('qq_refresh_token', 'mock_refresh_token');
  localStorage.setItem('qq_user_info', JSON.stringify(mockUserInfo));
  loginStatus.value = 'QQ登录成功！';
  statusClass.value = 'success';
  userInfo.value = mockUserInfo;
  // 跳转到实名认证流程页面
  setTimeout(() => {
    router.push('/home');
  }, 1000);
};

const refreshQRCode = () => {
  qrCode.value = '';
  userInfo.value = null;
  generateQRCode();
};

const goToMainPage = () => {
  router.push('/verify-process');
};

const refreshQQQRCode = () => {
  qqQRCode.value = '';
  generateQRCode();
};

const simulateQQLogin = () => {
  qqDialogVisible.value = true;
};

const onQQDialogClose = () => {
  qqDialogVisible.value = false;
};
</script>

<style scoped>
.qq-login-container {
  text-align: center;
  padding: 20px;
}

.qr-code-area {
  margin-bottom: 20px;
}

.qr-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.loading {
  font-size: 18px;
  color: #606266;
}

.status-message {
  margin-bottom: 20px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}

.info {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

.success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

.error {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}

.user-info {
  margin-bottom: 20px;
}

.user-details {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 16px;
}

.main-btn {
  padding: 8px 16px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.refresh-btn {
  padding: 8px 16px;
  background-color: #f56c6c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-btn {
  padding: 8px 16px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.qq-login-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 0 0;
}

.qq-login-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: center;
}

.qq-login-qrcode img {
  width: 200px;
  height: 200px;
  margin-bottom: 18px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.qq-login-tip {
  width: 100%;
  margin-bottom: 18px;
  border-radius: 6px;
}

.qq-login-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: 100%;
}
</style>